<template>
  <div class="work" ref="work">
    <div class="w-text">
      <div>
        <p>这一年以来</p>
        <p>
          有<span>{{ props.stats?.earlyAttendanceDays }}</span>天，早上不到8点，你就已经在工作状态了
        </p>
        <p>在每一个充满活力的早晨</p>
        <p>愿所有的美好，与你环环相扣</p>
        <br />
        <p>
          有<span>{{ props.stats?.lateAttendaceDays }}</span>天，深夜9点，你还在办公桌前工作
        </p>
        <p>城市已入眠，你仍在为梦想而努力</p>
        <p>夜深时，别忘了照顾好自己</p>
      </div>
    </div>
    <img class="w-bg" src="@/assets/img/work/bg.png" alt="" />
    <img class="w-bg-bottom" src="@/assets/img/work/bg-bottom.png" alt="" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { slideUp, slideDown } from "@/utils/slide";
import { changeStatusBarColor } from "@/cordova/common";

const props = defineProps<{
  stats: any;
}>();

const emit = defineEmits(["slideUp", "slideDown"]);

onMounted(() => {
  slideUp(work.value, () => {
    console.log("hello");
    emit("slideUp");
  });
  slideDown(work.value, () => {
    emit("slideDown");
  });
  changeStatusBarColor([7, 82, 183, 1]);
});

const work = ref(null);
</script>

<script lang="ts">
export default {
  name: "WorkPage",
};
</script>

<style lang="scss" scoped>
.work {
  @include full-screen-relative;
  background: $main-blue;
}

.w-bg {
  @include animation-move-down;
  position: absolute;
  top: 0;
  left: -10px;
  height: 979px;
  width: calc(100vw + 20px);
}

.w-bg-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 550px;
}

.w-text {
  @include animation-fade-in;
  position: absolute;
  top: 800px;
  left: 64px;
  z-index: 999;
  font-size: 30px;
  font-family: ChangAnunitype;
  font-weight: 400;
  color: #ffffff;
  line-height: 60px;

  span {
    font-size: 48px;
  }
}
</style>
